<template>
  <div class="container">
    <div class="top">
      <div>使用指南</div>
      <div>
        欢迎您,{{ userName }}
      </div>
    </div>
    <div v-for="asset in computedAssets" class="asset">
      <!--      左右分列-->

      <asset :asset="asset" :key="asset.name" ></asset>
    </div>

  </div>

</template>

<script>
import Asset from "@/components/asset.vue";

export default {
  components: {Asset},
  data() {
    console.log('data')
    return {
      // userName:localStorage.getItem('user'),
      userName: 'webrainer',
      assets: this.computedAssets,
      test: this.computedTest
    }
  },
  computed: {
    computedTest() {
      return {
        name: '资产1',
        tags: '标签1',
      }
    },
    computedAssets() {
      alert('computedAssets')
      return [
        {
          name: '资产1',
          tags: '标签1',
          amount: 1000,
          profit: 100
        },
        {
          name: '资产2',
          tags: '标签2',
          amount: 2000,
          profit: 200
        },
        {
          name: '资产3',
          tags: '标签3',
          amount: 3000,
          profit: 300
        }
      ]
    },
  },

  methods: {
    computeAssets() {
      alert('computedAssets')
      return [
        {
          name: '资产1',
          tags: '标签1',
          amount: 1000,
          profit: 100
        },
        {
          name: '资产2',
          tags: '标签2',
          amount: 2000,
          profit: 200
        },
        {
          name: '资产3',
          tags: '标签3',
          amount: 3000,
          profit: 300
        }
      ]
    },
  }


}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 80px;
    color: #fff;
    margin-bottom: 20px;

    & > div {
      margin-right: 20px;
    }
  }

  .bottom {
    flex: 1;
    margin-top: 20px;
    display: flex;

    .right {
      flex: 1;
      background-color: #fff;
    }

    .left {
      background-color: transparent;

      .el-menu {
        border: 0;
        margin-left: 30px;
      }
    }
  }


}
.asset {
  //向下移动2vh
  float: left;
  width: 50%;
}

.asset:nth-child(odd) {
  float: right;
  width: 100%;
}

.asset:first-child {
  margin-top: 2vh;
}
</style>